<template lang="pug">
div
    el-form-item(v-for="(item, index) in cList" :key="item.key")
        el-input.is-required(v-model="item.count" type="number" style="width:15%;margin:10px 0;margin-right:10px;" placeholder="规格数量")
        el-input.is-required(v-model="item.price" type="number" style="width:15%;margin:10px 0;margin-right:10px;" placeholder="售价")
        el-input.is-required(v-model="item.oldPrice" type="number" style="width:15%;margin:10px 0;margin-right:10px;" placeholder="原价")
        el-input.is-required(v-model="item.ptType" type="number" style="width:15%;margin:10px 0;margin-right:10px;" placeholder="拼团人数")
        el-input.is-required(v-model="item.ptPrice" type="number" style="width:15%;margin:10px 0;margin-right:10px;" placeholder="拼团价")
        el-button(@click="func(index)" type="danger" icon="el-icon-delete" v-if="index!=0")
    el-form-item
        el-button(@click="plus" type="primary" icon="el-icon-edit") 添加规格数量

</template>

<script>
    export default{
        props:{
            cList:{
                type: Array,
                required: true,
                default: []
            }
        },
        data(){
            return{

            }
        },
        watch:{//监听,如果数据又变化,那么提交到父元素
            'cList':{
                handler: function(val, oldval) {
                    this.$emit('cList-change', val)
                },
                deep: true
            }
        },
        methods:{
            plus(){//新增
                var items={count:'',price:'',oldPrice:'',ptType:'',ptPrice:''}
                this.cList.push(items)
            },
            func(i){//删除
                this.cList.splice(i,1)
            }
        }
    }
</script>
<style>
.inline{
    text-align: left !important;
    display: inline-flex !important;
}
.inline{
    margin-left: -50px !important;
}
</style>

